<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<!-- <u-navbar back-icon-color="#fff" :border-bottom="false" height="44" :background="{ background: 'none' }">

			<view class="title">
				下载记录
			</view>
		</u-navbar> -->
		<!-- 壁纸瀑布流 -->
		<!-- <u-sticky bgColor="none"> -->

		<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
			:active-item-style="ActiveStyle" inactive-color="#fff" :list="categoryList" name="categoryName"
			:current="current" @change="change">
		</u-tabs>
		<!-- </u-sticky> -->

		<!-- 瀑布流 -->
		<mobile v-if="categoryType=='mobile'" :list="list" />

		<pc v-else-if="categoryType=='pc'" :list="list" />
		<!-- 头像 -->
		<photo v-else-if="categoryType=='photo'" :list="list" />
		<trends v-else-if="categoryType=='trends'" :list="list"></trends>
		<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
			margin-bottom="10" />
		<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
			src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>


	</view>
</template>

<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import mobile from './mobilehistory';
	import pc from './pchistory';
	import photo from './photohistory.vue';
	import trends from './trendshistory'
	export default {
		components: {
			mobile,
			pc,
			photo,
			trends
		},
		data() {
			return {
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				categoryList: [],
				categoryType: '',
				categoryId: 0,
				// 图片列表
				list: [],
				current: 0,
				page: 1,
				total: 0,
				size: 10,
				// 数据为空
				isEmpty: false,
				status: "loadmore",
			}
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.page * this.size;

			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				//加载中状态
				this.status = "loading";
				this.page++;
				this.getDownloadPicList();
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中...",
			})
			// 获取分类列表
			this.getCategoryList()

		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			change(index) {
				this.current = index;
				this.categoryType = this.categoryList[index].type
				this.categoryId = this.categoryList[index].categoryId
				this.status = "loading";
				this.page = 1;
				this.list = [];
				this.getDownloadPicList()
			},
			// 获取分类列表
			getCategoryList() {
				this.$u.api.mine.getDownloadCategory().then(res => {
					this.categoryList = res.data
					if (this.categoryList && this.categoryList.length > 0) {
						this.categoryType = this.categoryList[this.current].type
						this.categoryId = this.categoryList[this.current].categoryId
						this.getDownloadPicList()
					} else {
						this.isEmpty = true
					}

				})
			},
			// 获取图片列表
			getDownloadPicList() {
				if (this.categoryType == 'mobile') {
					this.size = 15;
				} else if (this.categoryType == 'pc') {
					this.size = 10;
				} else {
					this.size = 28;
				}
				this.$u.api.mine.getDownloadPicList({
					categoryId: this.categoryId,
					page: this.page,
					size: this.size
				}).then(res => {

					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list.push(...res.data.list);
					} else {
						this.list = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list.length == 0) {
						this.isEmpty = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		margin: 32rpx;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}
	}
</style>